<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>VUE的生命周期函数</title>
		<script type="text/javascript" src="../vue.js" ></script>
	</head> 
	<body>
		<div id = "root">
			<div style="width:50%;float: left;">
				<img v-bind:src="imgUrl" width="90%"/>
			</div>
			<div style="width:45%;float: left;" @click = "handleClick">
				{{message}}
			</div>
			
		</div>
	</body>
	<script>
	 //生命周期函数就是Vue实例在某个时间点会自动执行的函数
	  var vm = new Vue({
	  	el : "#root",
	  	data : {
	  		imgUrl : '../img/day04.png',
	  		message : '消息'
	  	},
	  	beforeCreate : function() {
	  		console.log("beforeCreate");
	  	},
	  	created : function() {
	  		console.log("created");
	  	},
	  	beforeMount : function() {
	  		console.log(this.$el);
	  		console.log("数据和模板相结合挂载到界面的之前:beforeMount");
	  	},
	  	mounted : function() {
	  		console.log(this.$el);
	  		console.log("数据和模板相结合挂载到界面的之后:mounted");
	  	},
	  	beforeDestroy : function() {
	  		console.log("控制台:vm.$destroy();--->beforeDestroy");
	  	},
	  	destroyed : function() {
	  		console.log("destroyed");
	  	},
	  	beforeUpdate : function() {
	  		console.log("beforeUpdate");
	  	},
	  	updated : function() {
	  		console.log("updated");
	  	},
	  	methods : {
	  		handleClick : function(){
	  			this.message = "测试数据改变"
	  		}
	  	}
	  });
	</script>
</html>
